import { Row, Col, Spin, Upload, Button, Icon, message } from 'antd';
import { WeaUpload, WeaBrowser, WeaFormItem, WeaError, WeaSelect, WeaTab, WeaTop, WeaDialog, WeaHelpfulTip } from 'ecCom';
import equals from 'deep-equal';
import { WeaTableNew, WeaSwitch, WeaForm } from 'comsMobx';
import { Condition, getAdButtons } from '../list/listCondition';

const WeaTable = WeaTableNew.WeaTable;
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class AddBatch extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { contentStore } = this.props;
    const { importInitData, fileList, importType, options, showLog, modifyTableStore, showLogDeatil, modifyTableStoreDetail, form, showSearchAd, clearLogDetaile, importdata, logConditionForm } = contentStore;
    const tipInfoList = toJS(importInitData.tipInfoList);
    const formParams = form.getFormParams() || {};
    const lis = [];
    if (tipInfoList) {
      tipInfoList.map((info, index) => {
        lis.push((<li style={{ lineHeight: 2 }}>{info}</li>));
      });
    }
    const manager = importInitData.manager ? importInitData.manager.browserConditionParam : {};
    const customerStatus = importInitData.customerStatus ? importInitData.customerStatus.browserConditionParam : {};
    const importTypeOptions = importInitData.importType && importInitData.importType.options ? importInitData.importType.options : [];
    const icon = ecCom.WeaTools.getIconBGC('crm');
    const title = `${getLabel(389243, '添加：对Excel文件中的客户执行【新建】操作，如果系统中已存在该客户，将会提示出是否继续新建。')}<br>${
      getLabel(389244, '更新：对Excel文件中的客户执行【更新】操作，如果系统中客户不存在，则执行【新建】操作。')}<br>${
      getLabel(389245, '提示：【更新】操作需要有【客户维护】权限的管理员进行操作，如果需要，请联系有此项权限的管理员。')}`;
    return (
      <div>
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@g96he3`}
          onCancel={() => this.props.contentStore.showLog = false}
          visible={showLog}
          title={getLabel(24835, '导入日志')}
          style={{ width: 1000, height: 650 }}
          hasScroll
          scalable
          {...icon}
        >
          <WeaTab
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@v386zw`}
            buttonsAd={getAdButtons(contentStore, this.props.ecId || '')}
            searchType={['advanced']}
            searchsBaseValue={formParams && formParams.name || ''}
            setShowSearchAd={(bool) => { contentStore.setShowSearchAd(bool); }}
            hideSearchAd={() => contentStore.setShowSearchAd(false)}
            searchsAd={
              <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@cmxvm2`} listStore={contentStore} form={logConditionForm} onEnterSearch={this.onEnterSearch} /></div>
            }
            showSearchAd={showSearchAd}
          />
          <WeaTable
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@92u43e`}
            comsWeaTableStore={modifyTableStore}
            pagination
            getColumns={columns => this.getColumns(columns)}
            onOperatesClick={(record, index, operate, flag) => this.onOperatesClick(record, index, operate, flag)}
          />

        </WeaDialog>
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@gg5tv2`}
          onCancel={() => contentStore.clearLogDetaile()}
          visible={showLogDeatil}
          title={getLabel(31704, '日志详情')}
          style={{ width: 900, height: 600 }}
          hasScroll
          {...icon}
        >
          <WeaTable
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ab9u3r`}
            comsWeaTableStore={modifyTableStoreDetail}
            pagination
          />
        </WeaDialog>
        <iframe id="downFile" name="downFile" style={{ display: 'none' }} />
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gpiv1k`} className="crm-add-row">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@umf2x7`} span="24" className="crm-add-batch-title">{getLabel(18038, '客户导入')}</Col>
        </Row>
        <div className="crm-import-file" style={{ margin: '10px 0', paddingLeft: '28px' }}>
          <WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@d5o4de`}
            label={getLabel(16699, 'Excel文件')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 8 }}
          >
            <WeaError
              ecId={`${this && this.props && this.props.ecId || ''}_WeaError@ako7ao`}
              tipPosition="top"
              style={{ width: 300 }}
              ref={ref => this.props.contentStore.errorRefs.file = ref}
              error={getLabel(18618, '请选择要导入的EXCEL文档！')}
            >

              <WeaUpload
                ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@zfiq9q`}
                uploadUrl="/api/crm/common/fileUpload"
                category="string"
                // maxUploadSize={1}
                viewAttr={3}
                // onUploading={status => console.log(status)}
                showOrder={false}
                editable={false}
                maxFilesNumber={1}
                showUploader
                showUploadTime
                // showCancleUpload={true}
                showClearAll={false}
                isDetail={false}
                autoUpload
                replaceWhenOver={false}
                onChange={this.fileOnChange}
              />

            </WeaError>
          </WeaFormItem>

          <WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@89n06b`}
            label={getLabel(1278, '客户经理')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 8 }}
          >
            <WeaError
              ecId={`${this && this.props && this.props.ecId || ''}_WeaError@ryh3at`}
              tipPosition="top"
              style={{ width: 300 }}
              ref={ref => this.props.contentStore.errorRefs.manager = ref}
              error={`"${getLabel(1278, '客户经理')}"${getLabel(21423, '未填写')}`}
            >
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@t9im7f`} {...manager} onChange={(ids, name, data) => { this.changeBrowser(ids, name, data, 'manager'); }} />
            </WeaError>
          </WeaFormItem>
          <WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@zpz8fn`}
            label={getLabel(602, '客户状态')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 8 }}
          >
            <WeaError
              ecId={`${this && this.props && this.props.ecId || ''}_WeaError@qn47np`}
              tipPosition="top"
              ref={ref => this.props.contentStore.errorRefs.customerStatus = ref}
              style={{ width: 300 }}
              error={`"${getLabel(602, '客户状态')}"${getLabel(21423, '未填写')}`}
            >
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@chyki4`} {...customerStatus} helpfulTip={getLabel(515414, '状态默认值：与后端的客户状态设置中显示顺序有关，选项中排在第一位的为默认值，如需更改默认值或选项顺序，请在后端状态设置中维护')} onChange={(ids, name, data) => { this.changeBrowser(ids, name, data, 'customerStatus'); }} />
            </WeaError>
          </WeaFormItem>
          <WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@eljk1g`}
            label={getLabel(15503, '操作类型')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 8 }}
          >
            <WeaSelect
              ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@l3f1l1`}
              style={{ width: 300 }}
              options={importTypeOptions}
              value={importdata.importType1}
              onChange={(importType) => {
                this.changeSelect(importType);
              }}
              helpfulTip={title}
            />
            {/* <WeaHelpfulTip
                            width={650}
                            title={<div dangerouslySetInnerHTML={{ __html: title }} />}
                        /> */}
          </WeaFormItem>
        </div>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@b1spqq`} className="crm-add-row">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ryglfo`} span="24" className="crm-add-batch-title">{getLabel(85, '说明')}</Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@01k5k3`} className="crm-add-row">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bn6zq3`} span="24" className="crm-add-batch-title">
            <div style={{ lineHeight: 2 }}><strong>{getLabel(28445, '导入步骤')}：</strong></div>
            <div style={{ paddingLeft: 43 }}>
              <ul>
                <li style={{ lineHeight: 2 }}>{getLabel(28447, '第一步，请先')}<a onClick={() => { contentStore.generateExcel(); return false; }} style={{ color: 'blue !important', textDecoration: 'underline !important' }}>{getLabel(28446, '下载EXCEL文档模版')}</a>，<span style={{ color: 'red' }}>{this.convertSpecialChar(getLabel(126071, '调整模板请到"后端应用中心-客户-基本信息字段设置"调整导入字段后保存'))}</span>。</li>
                <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84295, '第二步，下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉。') }} />
                <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84297, '第三步，选择客户经理，默认情况下，客户经理是客户导入者本人。') }} />
                <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84298, '第四步，可以选择被导入的客户的状态，如果不进行选择，默认情况下导入的客户是无效客户。') }} />
                <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84300, '第五步，点击右键的提交，进入客户的导入。') }} />
                <li style={{ lineHeight: 2 }} dangerouslySetInnerHTML={{ __html: getLabel(84302, '第六步，如果以上步骤和Excel文件正确的话，则会被正确的导入，也会出现提示。如果有问题，则根据提示下载Excel并对错误之处进行修改。') }} />
              </ul>
            </div>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hqkevn`} className="crm-add-row">
          <div style={{ lineHeight: 2, color: '#FF0000' }}><strong>{getLabel(15736, '注意事项')}:</strong></div>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@x48kkt`} className="crm-add-row">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wenl77`} span="24" className="crm-add-batch-title">
            <div style={{ paddingLeft: 43 }}>
              <ul>
                <li style={{ lineHeight: 2 }}>{getLabel(389270, '【添加】时，如果数据库中有相同名字的客户，则会弹出提示框，点击【下载】可以下载文件查看，点击确认后新建重名客户；不存在的客户则直接新建。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389264, '【更新】时，会根据客户名称判断客户重复，如果有相同名字的客户，则对客户信息进行修改。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389310, '【更新】时，如果EXCEL中变更了客户经理，则会弹出提示框，点击【下载】可以下载文件查看，点击确定之后将进行更新。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389272, '【更新】时，如果客户经理进行了修改，则会发送流程提醒变更后的客户经理的上级（根据【后台-应用设置】里提醒）。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389431, '【更新】时，如果数据库中已有的客户的客户经理为空，则不会变更客户经理，且不会对该客户进行必填字段验证，只需填写需要更新的字段。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389268, '【更新】时，如果EXCEL中存在数据库中不存在的客户名，则会进行新建，并且没有提示。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389269, '【更新】时，会根据客户名称和客户联系人名称判断该客户是否存在该联系人，如果联系人存在，更新联系人信息，如果不存在，则进行新建联系人。')}</li>
                <li style={{ lineHeight: 2 }}>{getLabel(389271, '【右键】及【后端-日志中心】中可以查看本人及下属的导入日志，管理员可以查看全部导入日志')}</li>
                {/* <li style={{ lineHeight: 2 }}>{getLabel(84289,  "如果导入成功客户以上的客户(包括成功客户),请必须填写客户类型。")}</li> */}
                <li style={{ lineHeight: 2 }}>{getLabel(84290, '建议一次性导入的客户不要太多，控制在100以内。')}</li>
                {/* <li style={{ lineHeight: 2 }}>{getLabel(389427, "导入时，请确认表格中没有空行，以免导入不成功。")}</li> */}
              </ul>
            </div>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@e9n232`} className="crm-add-row">
          <div style={{ lineHeight: 2 }}><strong>{getLabel(84303, '按照EXCEL文档中各字段的顺序填写数据，其中红色的部分为必填字段，不能为空！')}</strong></div>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ieavwn`} className="crm-add-row">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f1pd5o`} span="12">
            <div style={{ color: '#FF0000' }}>
              <div style={{ lineHeight: 2 }}><strong>{getLabel(18019, '必填')}</strong></div>
              <div style={{ paddingLeft: 43 }}>
                <ul style={{ listStyleType: 'disc' }}>
                  {lis}
                </ul>
              </div>
            </div>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kdvlv0`} span="12" className="crm-add-input" >
            <div style={{ lineHeight: 2 }}><strong>{getLabel(84305, '错误类型')}</strong></div>
            <div style={{ paddingLeft: 43 }}>
              <ul style={{ listStyleType: 'disc' }}>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: 'red', display: 'inline', color: 'red' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84306, '数据不允许为为空')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#33CCCC', display: 'inline', color: '#33CCCC' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84307, '浏览框输入的信息不存在')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#FF9900', display: 'inline', color: '#FF9900' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84308, '数据必须为整数')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#99CC00', display: 'inline', color: '#99CC00' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84309, '数据必须为小数或者整数')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#CC99FF', display: 'inline', color: '#CC99FF' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84310, '输入的文字过长')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: 'yellow', display: 'inline', color: 'yellow' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84311, '时间输入有误')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#a1a3a6', display: 'inline', color: '#a1a3a6' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84312, '下拉框值有误')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#FF8080', display: 'inline', color: '#FF8080' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(84313, '判断值必须填【是】或【否】')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#0000FF', display: 'inline', color: '#FF8080' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(389260, '【更新】操作时客户经理变更')},{getLabel(389435, '按需处理')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#993300', display: 'inline', color: '#FF8080' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(512455, '导入文件中存在重名客户或重名联系人')}</span>
                </li>
                <li style={{ lineHeight: 2 }}>
                  <div style={{ backgroundColor: '#FF00FF', display: 'inline', color: '#FF8080' }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <span style={{ paddingLeft: 5 }}>{getLabel(512456, '导入文件中存在联系人所属客户无法找到的情况')}</span>
                </li>
              </ul>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
    fileOnChange=(info) => {
      const { importFileInfo } = this.props.contentStore;
      const fileList = { fileId: info };
      importFileInfo(fileList);
    }
    changeBrowser = (ids, name, data, type) => {
      const { saveImportData, saveImportInitData } = this.props.contentStore;
      saveImportData({ [type]: ids });
      this.props.contentStore.saveImportInitData(ids, name, type);
    }
    changeSelect = (importType) => {
      const { saveImportData } = this.props.contentStore;
      saveImportData({ importType1: importType });
    }
    convertSpecialChar = (str) => {
      str = str.toString();
      str = str.replace(/<br>/ig, '\n');
      str = str.replace(/&amp;/ig, '&');
      str = str.replace(/&nbsp;/ig, ' ');
      str = str.replace(/&lt;/ig, '<');
      str = str.replace(/&gt;/ig, '>');
      str = str.replace(/&quot;/ig, '"');
      return str;
    }

    getColumns = (columns) => {
      const that = this;
      const { contentStore } = this.props;
      // console.log(columns);
      columns.forEach((c) => {
        if (c.dataIndex == 'b') {
          c.render = function (text, record) {
            return (<div onClick={(bool) => { that.onOperatesClick({ id: record.b }); }}>
              <a>{getLabel(389254, '点击查看明细')}</a>
            </div>);
          };
        }
      });
      return columns;
    }
    onOperatesClick(param) {
      const { getLogDetail, showLogDeatil } = this.props.contentStore;
      getLogDetail(param);
      this.props.contentStore.showLogDeatil = true;
    }

    onEnterSearch=() => {
      const { contentStore } = this.props;
      contentStore.doSearch();
      contentStore.setShowSearchAd(false);
    }
}
